﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Templates_Applications_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style>
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.applicationsScrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 960px;
	height:362px;
	cursor:pointer;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.applicationsScrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
.items div {
	float:left;
	background-repeat:no-repeat;
	background-position:top left;
	width:960px;
	height:362px;
}

</style>

<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
    $(function() {
        var startpos;
        var endpos;
        // initialize scrollable

        $(".applicationsScrollable").scrollable({
            circular: true,
            onSeek: function() {
                $("#navApplications li").removeClass("active");
                $("#navApplications li").eq(this.getIndex()).addClass("active");
                //alert("load telerik ajax");
                //alert(this.getIndex())
            }
        });

        var api = $(".applicationsScrollable").data("scrollable");

        // use API to add our new item. after the item is being added seek to the end

        $(".applicationsScrollable").mouseup(function(e) {
            endpos = e.pageX;
            if (endpos > startpos) {
                api.prev();
            } else if (endpos < startpos) {
                api.next();
            } else { api.next() }
        })

        $(".applicationsScrollable").mousedown(function(e) {
            endpos = null;
            startpos = e.pageX;
        });

        $("a.navApplication").bind("click", function() {
            pos = $(this).parent().index();
            //$("a.navApplication").removeClass("active");
            //$(this).addClass("active");
            //this.parent
            //alert(pos);
            api.seekTo(pos)
            return false
        });

        /*$("a.navApplication").each("click", function() {
        alert(this);
        return false
        });*/


        /*$(".applicationsScrollable").click(function() {
        api.next();
        })*/

    });
</script>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contentTop" Runat="Server">
<div id="top" style="position:relative">
    <div class="applicationsScrollable">
        <div class="items">
            <asp:Panel ID="ApplicationsCivil" CssClass="item applicationsCivil" runat="server"/>
            <asp:Panel Id="ApplicationsMaritime" class="item applicationsMaritime" runat="server" />
            <asp:Panel Id="ApplicationsMilitary" class="item applicationsMilitary"  runat="server" />
        </div>
    </div>
    <%--<a class="prev browse left">---</a><a class="next browse right">|||</a>--%>

    <div id="subNav" style="" class="clearfix">
        <ul id="navApplications">
            <li class="active" ><a href="#" class="navApplication navCivil">Civil</a></li>
            <li ><a href="#" class="navApplication navMaritime">Maritime</a></li>
            <li ><a href="#" class="navApplication navMilitary">Military</a></li>
        </ul>
        <ul id="navDetails">
            <li><a href="#" class="navSystems">Systems</a></li>
            <li><a href="#" class="navApplications active">Applications</a></li>
        </ul>
        
    </div>
    <div id="pageTitle" class="clearfix">
            <h1><acms:PostDisplayName ID="PostDisplayName" runat="server" /></h1>
            <%--<a href="#" id="moreInfo" class="off">More Info</a>--%>
        </div>
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentBase" Runat="Server"></asp:Content>

